import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getTimestamp } from '@/utils/auth'
import router from '@/router'

// create an axios instance
// 因为开发的时候和线上的时候使用的接口不一样
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 5000 // request timeout
})

// 添加请求拦截器
// axios请求默认会执行 Promise.reject把当前这一次请求直接中断了
service.interceptors.request.use(function(config) {
  // 在发送请求之前做些什么
  const token = store.getters.token
  if (token) {
    // 因为登录不需要判断token有没有过期的，所以只有当有token才需要判断token是不是过期
    const start = getTimestamp() - 0
    const end = Date.now()
    // 2 * 60 * 60 * 1000 2个小时
    if (end - start >= 7200000) {
      store.dispatch('user/logout')
      router.push('/login')
      Message.error('身份信息超时，请重新登录')
      // 如果不写，会有一次ajax请求是浪费了 白发送了一次 写了这行，ajax直接中断了
      return Promise.reject(new Error('身份信息超时，请重新登录'))
    }
    // 把时间戳获取出来
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, function(error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
// Promise.then如果没有写return 也是成功的意思 fullied的意思 只不过下一个then拿到的res是undeined
service.interceptors.response.use(function(response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  const { data, message, success } = response.data
  if (success) {
    return data// 返回的是处理好的数据
  } else {
    Message.error(message)
    return Promise.reject(new Error(message))
  }
}, function(error) {
  console.dir(error)
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  // 被动失效
  if (error.response.status === 401) {
    store.dispatch('user/logout')
    router.push('/login')
    Message.error('身份信息超时，请重新登录')
  }
  return Promise.reject(error)
})

export default service

// 这个项目有二个接口服务器 /prod-api /api
// request请求
// response响应

// 路由守卫 看有没有token

// 我们可以把判断token有没有过期写在路由守卫中，也可以写在请求拦截器中，但是写在请求拦截器中更好
// 路由守卫有的属于白名单，不用token

// 主动就是我们自己天天主动看绿码有没有过期
// 被动就是扫码发现灰色

// 打扫卫生 主动你自己天天脏打扫 有客人来了

// 主动失效 时间差 在登录的一瞬间把那个时间点的时间戳记录到本地存储 每次在请求拦截器 把当前时间减一下，看时间差有没有超过2个小时间
// 被动失效
// this.$store.state
// this.$router

// router 路由对象 是通过VueRouter实例化出现 只有一个 是用来做跳转切换的
// route 代表的是当前这一个路由规则 路线 可以获取路由参数 $route.params $route.query
// ]

// const router = new VueRouter({
//   routes:[
//     {path:'',component:''},
//     {path:'',component:''}
//   ]
// })
